<template>
  <b-container class="an-const">
    <b-row>
      <b-col>
        <nav-list class="an-left-list"></nav-list>
        <an-contact></an-contact>
      </b-col>
      <b-col md="8">
        <div class="an-cont-body">
          <b-breadcrumb :items="breadcrumb"></b-breadcrumb>
          <div class="title">{{defDate.title}}</div>
          <div class="an-mavn" v-html="defDate.const"></div>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
import navList from "@/components/navList.vue";
import anContact from "@/components/anContact.vue";
import { domeDate } from "@/api/dateJson.js";
export default {
  components: {
    navList,
    anContact
  },
  data() {
    return {
      defDate: {},
      breadcrumb: [
        {
          text: "首页",
          href: ""
        },
        {
          text: "",
          href: ""
        }
      ]
    };
  },
  computed: {
    id() {
      return this.$route.query.id;
    }
  },
  watch: {
    id() {
      this.getDate();
    }
  },
  mounted() {
    this.anLoad();
  },
  methods: {
    anLoad() {
      this.getDate();
    },
    getDate() {
      domeDate.forEach(element => {
        if (this.id == element.id) {
          this.defDate = element;
          this.breadcrumb[1].text = element.title;
        }
      });
    }
  }
};
</script>
<style scoped>
.an-const {
  margin-top: 40px;
}
.an-left-list {
  margin-bottom: 15px;
}
.title {
  font-size: 32px;
  font-weight: 500;
  padding-bottom: 15px;
}
</style>